<!--
 * @Author: WLang
 * @LastEditors: WLang
 * @Description: 
 * @Date: 2023-06-25 22:15:50
 * @LastEditTime: 2023-06-28 22:56:04
 * @FilePath: \my-project\src\views\home\NewsView.vue
-->
<template>
  <div class="cq-news">
    <div class="banner">
        <div class="banner-con tc cfff">
            <h2 class="fz40">橙券新闻动态</h2>
            <p class="fz20 lh60">新闻动态抢先看，从能力输出到技术赋能，橙券从未放缓脚步，只为与您见证橙券成长的每一步</p>
        </div>
    </div>
    <div class="main w1200 bcfc">
        <ul class="main-con flex flex-wrap flex-between">
            <li v-for="item in newList" :key="item.id">
              <a @click="handle(item)">
                <img :src="item.cover" width="385" height="219" alt="!">
                <p class="new-desc lh44 mb23 c333">{{item.title}}</p>
                <p class="fz14 c666">{{item.updatedAt}}</p>
              </a>
            </li>
        </ul>
        <div class="main-page">
            <a class="icon icon-left" href="#"></a>
            <ul class="page-number">
              <li v-for="i in pagination.pageNumber" :key="i" ><a href="javascript:;">{{i}}</a></li>
            </ul>
            <a class="icon icon-right" href="#"></a>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  components:{},
  data(){
    return {
    newList: [],
    pagination: {}
    }
  },
created(){
  this.getNewList();
},
mounted(){},
watch:{},
computed:{},
methods:{
  //获取新闻列表
  async getNewList () {
    const data = await this.$req('/newslist', 'get');
    console.log('data:', data);
    this.newList = data.data;
    this.pagination = data.pagination;
  },
  handle(item) {
    this.$router.push({name: 'details',params: { id: item._id }});
  }
},
}
</script>
<style lang="scss" scoped>
.banner {
  position: relative;
  height: 200px;
  background: url(../../assets/images/banner-new.png) no-repeat center/cover;
}

.banner-con {
  position: absolute;
  width: 847px;
  height: 122px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.main {
  padding-top: 82px;
  padding-bottom: 60px;
  .page-number li {
  width: 35px;
  height: 35px;
  line-height: 35px;
  margin: 0 auto  
}
  .page-number {
  display: flex;
  text-align: center;
  width: 172px;
  margin: 0 auto;
  li a {
  color: #666;
  }
  } 
  .main-con p {
  margin-left: 20px;
  }
  .main-con li {
  width: 386px;
  height: 328px;
  box-shadow: 0 0 10px 0 rgba(237, 237, 237, 0.7);
  margin-bottom: 60px;
  cursor: pointer;
  &:hover .new-desc {
  color: #ff7200;
}
}
}

.main .page-number li:nth-of-type(1) {
  border-radius: 50%;
  background-color: #ff7200;
}

.main .page-number li:nth-of-type(1) a {
  color: #fafafa;
}

.main-page {
  position: relative;
  .icon {
  position: absolute;
  top: 7px;
  width: 22px;
  height: 22px;
}
  .icon-left {
  left: 455px;
  background: url(../../assets/images/new-last.png) no-repeat center/cover;
}
.icon-right {
  right: 475px;
  background: url(../../assets/images/new-next.png) no-repeat center/cover;
}
}

</style>